
.ng-enter { z-index: 9; }
.ng-leave { z-index: 10; }
.page.ng-enter { animation: fadeIn .3s both; }
.page.ng-leave { animation: fadeOut .3s both; }




.fadeIn {
    animation: fadeIn 1s linear;

    @at-root {
        @keyframes fadeIn {
           0%{
           		opacity: 0;
           }
           100%{
           		opacity: 1;
           }
        }
    }
}
.fadeOut {
    animation: fadeOut 1s linear;

    @at-root {
        @keyframes fadeOut {
           0%{
              opacity: 1;
           }
           100%{
              opacity: 0;
           }
        }
    }
}


.slideInLeft {
    animation: slideInLeft 1s ;

    @at-root {
        @keyframes slideInLeft {
           0%{
              @include translate(-100%,0);
           }
           100%{
              @include translate(0,0);
           }
        }
    }
}

.slideOutRight {
    animation: slideOutRight 1s ;

    @at-root {
        @keyframes slideOutRight {
           0%{
              @include translate(0,0);
           }
           100%{
              @include translate(100%,0);
           }
        }
    }
}


.slideInDown {
    animation: slideInDown 1s ;

    @at-root {
        @keyframes slideInDown {
           0%{
              opacity: 0;
              @include translate(0,-30%);
           }
           80%{
              @include translate(0,10%);
           }
           100%{
              @include translate(0,0);
           }
        }
    }
}
.slideInUp {
    animation: slideInUp 1s ;

    @at-root {
        @keyframes slideInUp {
           0%{
              opacity: 0;
              @include translate(0,30%);
           }
           80%{
              @include translate(0,-10%);
           }
           100%{
              @include translate(0,0);
           }
        }
    }
}

.scaleYdown {
    animation: scaleYdown 1s both;

    @at-root {
        @keyframes scaleYdown {
           0%{
              opacity: 0;
              @include scaleY(0);
              @include transform-origin(top);
           }
           100%{
              opacity: 1;
              @include scaleY(1);
              @include transform-origin(top);
           }
        }
    }
}
@mixin delayp ($delay){
    animation-delay: $delay;
    transition-delay: $delay;
}

@for $i from 1 through 30 {
  .dy#{$i} { @include delayp(0.1s * $i); }
}




